<template>
  <div class="container">
    <div class="nav">
      <van-nav-bar title="我的优惠卷" @click-left="$router.push('/mine')">
        <template #left>
          <van-icon name="arrow-left" size="1rem" color="black" />
        </template>
      </van-nav-bar>
    </div>
    <div style="padding-top:.25rem">
      <my-tab :tabList="['未使用','已使用','已过期']" :onTabChange="tabChange" :inx="1">
        <template #content>
          <ul class="listBox">
            <li v-for="(item,inx) in couponList" :key="inx">
              <div class="couponTop">
                <div class="topLeft">
                  <span class="couponTitle">{{item.title}}</span>
                  <span class="expiredTime">{{item.expired_at}}</span>
                </div>
                <span class="amount">{{item.amount}}</span>
              </div>
              <div class="couponBottom">
                <span>{{item.condition }}</span>
                <div class="toUse">立即使用</div>
              </div>
            </li>
          </ul>
        </template>
      </my-tab>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon } from "vant";
import MyTab from "@/components/MyTab";
export default {
  components: {
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "my-tab": MyTab
  },
  methods: {
    tabChange(inx) {
      console.log(inx);
    }
  },
  data() {
    return {
      couponList: [
        {
          title: "我是优惠卷",
          expired_at: "有效期至2020-06-26 02:23:45",
          amount: "￥99元",
          condition: "满￥199元可用"
        },
        {
          title: "欢乐大放送",
          expired_at: "有效期至2020-06-22 02:23:45",
          amount: "￥19元",
          condition: "满￥99元可用"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #f7f7f7;
}
.listBox {
  li {
    margin-bottom: 0.4rem;
    background-color: white;
    border-radius: 0.4rem;
    .couponTop {
      position: relative;
      padding: 0.4rem 0.6rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px dashed #ddd;
      .topLeft {
        display: flex;
        flex-direction: column;

        .couponTitle {
          font-size: 0.7rem;
        }
        .expiredTime {
          padding-top: 0.25rem;
          font-size: 0.6rem;
          color: #999;
        }
      }
      .amount {
        color: #ff4544;
        font-weight: 600;
      }
      &::before {
        position: absolute;
        content: "";
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        background-color: #f7f7f7;
        left: -0.4rem;
        bottom: -0.4rem;
      }
      &::after {
        position: absolute;
        content: "";
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        background-color: #f7f7f7;
        right: -0.4rem;
        bottom: -0.4rem;
      }
    }
    .couponBottom {
      padding: 0.4rem 0.6rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > span {
        font-size: 0.6rem;
        color: #999;
      }
      .toUse {
        color: #ff4544;
        font-size: 0.75rem;
      }
    }
  }
}
</style>